<template>
    <!-- 人气推荐 -->
    <!-- http://82.157.146.153:8090/wx/goods/list?isHot=true&page=1&limit=10 to="/" -->
  <div class="recommend">
    <returnPage></returnPage>
    <img src="../../assets/imgs.png" alt="">
    <h1 class="image-text">大家都在买</h1>
    <van-card
      v-for="item in recommend"
      :key="item.id"
      :price="item.retailPrice"
      :title="item.name"
      :thumb="item.picUrl"
      @click="newClickRecommend(item.id)"
    />
    <van-divider dashed>没有更多了</van-divider>
  </div>
</template>

<script>
import { goodsList } from '../../api/home'
export default {
  name: 'recommend',
  components: {},
  data () {
    return {
      recommend: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 发起请求
    goodsList().then((res) => {
      const { data } = res.data
      // 人气推荐
      this.recommend = data.list
      // console.log(data)
    })
  },
  methods: {
    // 更多人气推荐点击事件
    newClickRecommend (id) {
      this.$router.push('/sonFirstPublish?id=' + id)
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  position: relative;
  img {
    width: 100%;
    height: 190px;
  }
  .image-text {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 2.66667vw;
    z-index: 1;
  }
}
</style>
